<template>
	<view class="s-my">
		<view style="display: flex; align-items:center;padding: 20rpx;">
			<image style="width: 120rpx;height: 120rpx;border-radius: 50%;" :src="userinfo ? userinfo.avtatr : user"></image>
			<view style="height:90rpx;margin-left:20rpx;display: flex;flex-direction: column;justify-content: space-around;">
				<text>{{ userinfo ? userinfo.userName : '尚未登录' }}</text>
				<text>年龄：{{ userinfo ? userinfo.age : '0' }}</text>
			</view>
		</view>
		<uni-group mode="card" class="unilistbox">
			<uni-list>
				<uni-list-item title="个人中心" clickable showArrow @click="Gopersonal">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-yonghu"></uni-icons></view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-group>
		<uni-group mode="card" class="unilistbox">
			<uni-list>
				<uni-list-item title="页面(页面的生命周期)" clickable showArrow to="/pages/my/my-share?title=页面(页面的的生命周期)">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-021chouti"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="地址(页面通讯)" clickable showArrow to="/pages/my/my-address?title=地址">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-caidan"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="设置" clickable showArrow>
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-group>

		<uni-group mode="card" class="unilistbox">
			<uni-list>
				<uni-list-item title="位置-获取当前位置" clickable showArrow to="/pages/my/my-mapcur">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="位置-使用地图查看位置(应用内置)" clickable showArrow to="/pages/my/my-mapLocation">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="位置-通过地图选择位置(通过方法显示地图)" clickable showArrow to="/pages/my/my-mapwhere">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="位置-默认显示地图(位置自定义)" clickable showArrow to="/pages/my/my-map">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				
				
				<uni-list-item title="位置-地图控制" clickable showArrow to="/pages/my/my-mapControl">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-group>

		<uni-group mode="card" class="unilistbox">
			<uni-list>
				<uni-list-item title="媒体-图片(相机或相册)" clickable showArrow to="/pages/my/my-imgage">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="媒体-视频(相机或相册)" clickable showArrow to="/pages/my/my-video">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="富文本" clickable showArrow to="/pages/my/my-RichText">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-group>
		<uni-group mode="card" class="unilistbox">
			<uni-list>
				<uni-list-item title="系统信息(全部)" clickable showArrow to="/pages/my/my-equipment">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="获取设备基础信息" clickable showArrow to="/pages/my/my-getDeviceInfo">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="获取窗口信息" clickable showArrow to="/pages/my/my-getWindowInfo">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="获取微信 APP 基础信息" clickable showArrow to="/pages/my/my-getAppBaseInfo">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="获取网络类型" clickable showArrow to="/pages/my/my-getNetworkType">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="拨打电话" clickable showArrow to="/pages/my/my-PhoneCall">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="扫码" clickable showArrow to="/pages/my/my-scanCode">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="剪切板" clickable showArrow to="/pages/my/my-Clip">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="屏幕(亮度)" clickable showArrow to="/pages/my/my-ScreenBrightness">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="振动" clickable showArrow to="/pages/my/my-vibrate">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="手机联系人" clickable showArrow to="/pages/my/my-addPhoneContact">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="蓝牙" clickable showArrow to="/pages/my/my-Bluetooth">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="生物认证" clickable showArrow to="/pages/my/my-biology">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-group>
		<uni-group mode="card" class="unilistbox">
			<uni-list>
				<uni-list-item title="键盘" clickable showArrow to="/pages/my/my-Keyboard">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-group>
		<uni-group mode="card" class="unilistbox">
			<uni-list>
				<uni-list-item title="界面-交互反馈" clickable showArrow to="/pages/my/my-interactive">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="界面-设置导航条" clickable showArrow to="/pages/my/my-BarTitle">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="界面-背景-滚动-窗口" clickable showArrow to="/pages/my/my-pagebg">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="界面-媒体查询" clickable showArrow to="/pages/my/my-MediaQuery">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-shezhi"></uni-icons></view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-group>
		<uni-group mode="card" class="unilistbox">
			<uni-list>
				<uni-list-item title="分享" clickable showArrow to="/pages/my/my-sharenew">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-xiaoxi"></uni-icons></view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-group>
		<uni-group mode="card" class="unilistbox">
			<uni-list>
				<uni-list-item title="获取服务供应商(小程序)" clickable showArrow to="/pages/my/my-supplier">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-qita"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="获取个人信息(小程序)" clickable showArrow to="/pages/my/my-user">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-qita"></uni-icons></view>
					</template>
				</uni-list-item>
				<uni-list-item title="获取个人手机号(小程序)" clickable showArrow to="/pages/my/my-phone">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-qita"></uni-icons></view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-group><uni-group mode="card" class="unilistbox">
			<uni-list>
				<uni-list-item title="我的相册" clickable showArrow to="/subpkg/my_photo_detail/my_photo_detail?a=11&b=22">
					<template v-slot:header>
						<view class="slot-box"><uni-icons custom-prefix="iconfont" color="#05C697" type="icon-qita"></uni-icons></view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-group>
		<button v-if="userinfo" type="default" @click="loginDelete">退出登录</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user: require('@/static/default/teacher1.png')
		};
	},
	onShow() {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 0
		});
	},
	computed: {
		userinfo() {
			return this.$store.state.user.userInfo;
		}
	},
	// 页面的生命周期学习
	onTabItemTap(e) {
		console.log('常用于点击当前tabitem，滚动顶部或刷新当前页面');
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
	},
	// 页面的生命周期学习end
	methods: {
		loginDelete() {
			let _this = this;
			uni.removeStorage({
				key: 'userInfo',
				success: function(res) {
					_this.$store.commit('user/clearUserInfo'); //清空user模块下的userInfo内容
					uni.reLaunch({
						url: '/'
					});
				}
			});
		},
		Gopersonal() {
			if (!this.userinfo) {
				uni.showModal({
					title: '提示',
					content: '您还没有登录',
					confirmText: '去登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			} else {
				uni.navigateTo({
					url: '/pages/my/my-personal'
				});
			}
		}
	}
};
</script>

<style lang="scss">
.s-my {
	padding-top: 60rpx;
	box-sizing: border-box;

	.uni-group__content {
		padding: 0 !important;
	}

	.unilistbox {
		.uni-icons {
			display: inline-block;
			width: 50rpx;
			text-align: left;
		}
	}
}
</style>
